<template>
  <div class="arrange">
    <div class="output">
      <h3>排产计划</h3>
      <el-row :gutter="0">
        <el-form
          ref="ApsPlan"
          :model="formData"
          :rules="rules"
          size="medium"
          label-width="100px"
        >
          <el-col :span="24">
            <el-form-item label="计划名称" prop="planName">
              <el-input
                v-model="formData.planName"
                placeholder="请输入名称计划计划名称"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="计划单号" prop="model">
              <el-input
                v-model="formData.model"
                placeholder="请入输计划单号"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="零件型号" prop="productModel">
              <el-input
                v-model="formData.productModel"
                placeholder="请输入零件型号"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计划产量" prop="yield">
              <el-input-number
                v-model="formData.yield"
                placeholder="计划产量"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="投入数量" prop="putInto">
              <el-input-number
                v-model="formData.putInto"
                placeholder="投入数量"
              ></el-input-number>
            </el-form-item>
          </el-col>

          <el-col :span="23">
            <el-form-item label="时间安排" prop="select">
              <el-checkbox-group
                v-model="formData.select"
                :min="1"
                size="medium"
              >
                <el-checkbox-button :checked="Shiftchecked"
                  >白班</el-checkbox-button
                >
                <el-checkbox-button
                  v-for="(item, index) in selectShift"
                  :key="index"
                  :label="item.value"
                  :disabled="item.disabled"
                  :checked="item.checked"
                  >{{ item.label }}</el-checkbox-button
                >
              </el-checkbox-group>
            </el-form-item>
          </el-col>
          <el-col :span="23">
            <el-form-item label="" prop="select">
              <el-checkbox-group
                v-model="formData.select"
                :min="1"
                size="medium"
              >
                <el-checkbox-button>夜班</el-checkbox-button>
                <el-checkbox-button
                  v-for="(item, index) in selectNight"
                  :key="index"
                  :label="item.value"
                  :disabled="item.disabled"
                  :checked="item.checked"
                  >{{ item.label }}</el-checkbox-button
                >
              </el-checkbox-group>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="生产日期" prop="dates">
              <el-date-picker
                type="daterange"
                v-model="formData.dates"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                :style="{ width: '100%' }"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                range-separator="至"
                clearable
              ></el-date-picker>
              <el-button type="primary" @click="submitForm('ApsPlan')"
                >立即创建</el-button
              >
              <el-button @click="resetForm('ApsPlan')">重置</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </div>
  </div>
</template>
<script>

export default {
  components: {},
  props: [],
  data() {
    return {
      formData: {
        planName: "",
        model: undefined,
        productModel: undefined,
        yield: 0,
        putInto: 0,
        select: [],
        dates: [""],
      },
      rules: {
        planName: [
          {
            
            required: true,
            message: "请输入名称计划计划名称",
            trigger: "blur",
          },
        ],
        model: [
          {
            required: true,
            message: "请入输计划单号",
            trigger: "blur",
          },
        ],
        productModel: [
          {
            required: true,
            message: "请输入零件型号",
            trigger: "blur",
          },
        ],
        yield: [
          {
            required: true,
            message: "计划产量",
            trigger: "blur",
          },
        ],
        putInto: [
          {
            required: true,
            message: "投入数量",
            trigger: "blur",
          },
        ],
        select: [
          {
            required: true,
            type: "array",
            message: "请至少选择一个select",
            trigger: "change",
          },
        ],
        dates: [
          {
            required: true,
            type: "array",
            message: "请至少选择一个dates",
            trigger: "change",
          },
        ],
      },
      selectShift: [
        {
          label: "08:00-12:00",
          value: "1",
          checked: false,
        },
        {
          label: "12:40-17:00",
          value: "2",
          checked: false,
        },
        {
          label: "17:30-19:30",
          value: "3",
          checked: false,
        },
      ],

      selectNight: [
        {
          label: "19:30-23:30",
          value: "4",
          checked: false,
        },
        {
          label: "00:10-04:30",
          value: "5",
          checked: false,
        },
        {
          label: "05:00-07:00",
          value: "6",
          checked: false,
        },
      ],
      Shiftchecked: false,
      Nightchecked: false,
    };
  },
  computed: {},
  watch: {},
  created() {
    
  },
  mounted() {},
  methods: {
   
    submitForm(formName) {
      console.log(this.$refs[formName]);
      this.$refs[formName].validate((valid) => {
        if (valid) {
         
         
          this.axios({
            method: "post",
            url: "/create_plan",
            data: {
              title: this.formData.planName,
              numbers: this.formData.model,
              model: this.formData.productModel,
              out: this.formData.yield,
              in: this.formData.yield,
              workplan: this.formData.select,
              start: new Date(this.formData.dates[1]).getTime()/1000,
              end: new Date(this.formData.dates[0]).getTime()/1000,
            }
          })
            .then((res) => {
              console.log(res);
              if (res.data.meta.status == 200) {
                this.$message.success(
                  "创建成功，请到日历或者计划详情查看！！！！！！"
                );
                 this.$refs[formName].resetFields();
              } else {
                this.$message.error(res.data.meta.msg);
              }
              console.log(res);
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          this.$message.error("创建失败，请到按照表格提示填写");
          return false;
        }
      });
      
    },
    resetForm(formName) {
      //  console.log(formName);
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
@import "../../assets/css/arrange.less";</style
>>
